<template>
  <div class="recommend-singer-main-container">
    <recommend-nav class="singer-nav" :item="residentSinger"></recommend-nav>
    <div class="singer-list-container">
      <recommend-singer-item-message
          class="recommend-singer-item-message-item"
          v-for="item in residentSingerAllMessage"
          :item="item">
      </recommend-singer-item-message>
    </div>
  </div>
</template>
<script>
import RecommendNav from "@/components/recommend/RecommendNav";
import RecommendSingerItemMessage from "@/components/recommend/recommendSmallItem/RecommendSingerItemMessage";
import {getTopArtists} from "@/network/recommend/recommendedcontent";

export default {
  components: {
    RecommendNav,
    RecommendSingerItemMessage,
  },
  name: "RecommendSinger",
  data() {
    return {
      residentSinger: [{name: '入驻歌手', type: 'getResidentRingerAllMessage', index: 3}],
      residentSingerAllMessage: [],
    }
  },
  created() {
    this.getTopArtistsMessage()
  },
  methods: {
    async getTopArtistsMessage() {
      const {data: res} = await getTopArtists(10)
      // console.log(res)
      this.residentSingerAllMessage = res.artists
    }
  },
}
</script>

<style scoped lang="less">
.recommend-singer-main-container {
  height: auto;
  border: 1px solid #787878;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .singer-nav {
    width: 90%;
    
    /deep/ .recommend-nav-item {
      font-size: 12px;
      width: 70px;
      
      &:hover {
        font-size: 14px;
      }
    }
    
    /deep/ .more-item {
      width: 60px;
      font-size: 12px;
      
      &:hover {
        font-size: 14px;
      }
    }
  }
  
  .singer-list-container {
    width: 80%;
    
    .recommend-singer-item-message-item {
      margin-top: 20px;
      
      &:nth-child(10) {
        margin-bottom: 10px;
      }
    }
  }
}

</style>
